<template>
    <div class="place">
        <div class="headers">
            <div class="headerNav clearfix">
                <router-link to="/search">
                    <span class="search">
                        <img src="../images/mainOne/finding/dxj.png">
                    </span>
                </router-link>
                <router-link to="/index">
                    <span class="beauty_recommend" v-bind:class="{'active':head_nav_flag}">美丽推荐</span>
                </router-link>
                <router-link to="/learningBeauty">
                    <span class="learning_beauty" v-bind:class="{'active':!head_nav_flag}">学变美</span>
                </router-link>
                <span class="photo">
                    <router-link to="/sponsor">
                        <img src="../images/mainOne/guidePage/icon_yingdai_01.png">
                    </router-link>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "head",
    data() {
        return {
            head_nav_flag: true,
        }
    },
    methods: {
        classToggle: function () {

        },
    }
}
</script>

<style lang='less' scoped>
@pub_main_bgcolor :#ff406f;
.place {
    height: 320/75rem;
}

.headers {
    width: 100%;
    background: @pub_main_bgcolor;
    height: 310/75rem;
    padding-top: 30/75rem;
    .headerNav {
        font-size: 36/75rem;
        img {
            display: inline-block;
            height: 46/75rem;
            width: 46/75rem;
        }
        .search {
            margin-left: 22/75rem;
        }
        .beauty_recommend {
            color: #fff;
            margin-left: 80/75rem;
            display: inline-block;
            padding: 5px 10px;
        }
        .learning_beauty {
            color: #fff;
            margin-left: 135/75rem;
        }
        .photo {
            float: right;
            margin-right: 22/75rem;
        }
        .router-link-exact-active {
            span {
                border-bottom: 4/75rem solid #fff;
            }
        }
    }
}
</style>

